<template>
  <div v-loading="flag" class="nav gl_heightFull">
    <div v-if="currentInfo.organizationUnitEdition" class="gl_contentBox nav_left">
      <el-popover placement="bottom" width="280" trigger="hover" :content="currentInfo.organizationUnitEdition.organizationUnit.displayName">
        <div slot="reference" class="nav_left_top">{{ currentInfo.organizationUnitEdition.organizationUnit.displayName }}</div>
      </el-popover>
      <div class="nav_left_bottom">
        <div v-for="(item,index) in tabledata" :key="index" class="tree_nav">
          <el-popover placement="right-end" width="280" trigger="hover" :content="item.branchDelegation.name">
            <span slot="reference" :class="[index===cindex?'tree_clicktext':'tree_text']" @click="checkBranch(index)">{{ item.branchDelegation.name }}</span>
          </el-popover>
          <el-button type="text" icon="el-icon-delete" @click="close(item)" />
        </div>
      </div>
    </div>
    <div class="right">
      <div v-if="tabledata.length>0" class="gl_contentBox nav_top">
        <div>
          <img class="img" :src="getStaticFileUrl(Detail.imagePath)" alt="">
        </div>
        <div>
          <div class="nav_top_txt">{{ Detail.name }}</div>
          <div>
            <el-button type="primary" size="mini" @click="gocampus()">机构详情</el-button>
            <el-button type="primary" size="mini" @click="goGame()">赛事</el-button>
            <el-button type="primary" size="mini" @click="goTran()">培训</el-button>
            <el-button type="primary" size="mini" @click="goMall()">商城</el-button>
            <el-button type="primary" size="mini" @click="goSegment()">级段位申报</el-button>
            <el-button type="primary" size="mini" @click="goMemberfee()">会员费</el-button>
            <el-button type="primary" size="mini" @click="goDetails()">数据</el-button>
          </div>

        </div>
      </div>
      <div v-if="tabledata.length>0" class="gl_contentBox">
        <Personneltype v-if="branchId!==''" :branch-id="branchId" />
      </div>
      <div v-else>
        <div v-if="!flag" class="contentBox gl_heightFull gl_noData">
          <div>暂无分道馆</div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_MallStoreByOrganizationUnitIdOrganizationUnitId } from '@/extend/api/shoppingmallswaggerApi/app.js';
import { api_GET_ClubBranchBranches, api_DELETE_ClubBranch, api_GET_ClubBranchDelegations } from '@/extend/api/hallswaggerApi/app.js';
// import { Api_DELETE_ClubBranchQO } from '@/lib/form/hall/swaggerForm';
import Personneltype from './personneltype.vue';
export default {
  components: {
    Personneltype
  },

  data() {
    return {
      store: false,
      flag: false,
      cindex: 0,
      tabledata: [],
      goRouter: [],
      branchId: '', // 分道馆id
      Detail: {} // 选中道馆
    };
  },
  computed: {
    ...mapState({
      branchid: state => state.app.branchId
    }),
    currentInfo () {
      return this.$store.state.user.info;
    }
  },
  created() {
    this.getcamlist();
  },
  methods: {
    ...mapActions({ setISGetBranchId: 'app/setISGetBranchId' }),
    // 获取分道馆
    getcamlist() {
      this.flag = true;
      api_GET_ClubBranchBranches().then(res => {
        this.flag = false;
        this.tabledata = res.items;
        console.log(this.tabledata.length, this.flag);
        // if (this.tabledata !== []) {
        //   this.branchId = res.items[0].branchId;
        // }
        this.branchId = res.items[0].branchId;
        this.setISGetBranchId({
          isgetBranchId: this.branchId
        });
        // 获取选中道馆
        this.getbranch();
      }, error => {
        this.flag = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取选中道馆
    getbranch() {
      const _json = {
        OrganizationUnitIds: []
      };
      _json.OrganizationUnitIds[0] = this.branchId;
      api_GET_ClubBranchDelegations(_json).then(res => {
        console.log(res);
        this.Detail = res.items[0];
        this.getshoping(this.branchId);
      });
    },
    // 查询店铺
    getshoping(id) {
      api_GET_MallStoreByOrganizationUnitIdOrganizationUnitId(id).then(res => {
        console.log(res === '');
        if (res === '') {
          this.store = true;
        } else {
          this.store = false;
        }
        // if(res)
      });
    },
    // 删除分道馆
    close(row) {
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_ClubBranch({ branchId: row.branchId }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getcamlist();
        }, error => {
          const _msg = error.error.message || error.message;
          this.$message({ type: 'error', message: _msg });
        });
      });
    },
    // 切换道馆
    checkBranch(index) {
      this.cindex = index;
      this.branchId = this.tabledata[index].branchId;
      this.setISGetBranchId({
        isgetBranchId: this.branchId
      });
      this.getbranch();
    },
    gocampus() {
      this.$router.push({ name: 'Details', query: { branchid: this.branchId }});
    },
    goGame() {
      this.$router.push({ name: 'CampusGame', query: { branchid: this.branchId }});
    },
    goTran() {
      this.$router.push({ name: 'CampusTrain', query: { branchid: this.branchId }});
    },
    goMall() {
      if (this.store) {
        this.$message({ type: 'success', message: '暂无店铺' });
      } else {
        this.$router.push({ name: 'MallData', query: { branchid: this.branchId }});
      }
    },
    goSegment() {
      this.$router.push({ name: 'CampusLeverSegment', query: { branchid: this.branchId }});
    },
    goMemberfee() {
      this.$router.push({ name: 'Memberfee', query: { branchid: this.branchId }});
    },
    goDetails() {
      this.$router.push({ name: 'Datacollect', query: { branchid: this.branchId }});
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.contentBox {
  background-color: #fff;
    .gl_noData div {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 34px;
    color: #6a6a6a;
    top: 210px;
  }
}

.nav {
  display: flex;
}
.nav_top {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.nav_left {
  margin-right: 6px;
   width: 200px;
   .nav_left_top{
     color: rgba(127, 126, 236, 1);
     font-size: 20px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .nav_left_bottom{
     margin-left: 6px;
     margin-top: 28px;
     font-size: 14px;
     color: rgba(53, 52, 52, 1);
     .tree_nav {
       display: flex;
       align-items: flex-start;
       margin-bottom: 16px;
     }
     .tree_clicktext{
       color: rgb(0, 0, 0);
       display: inline-block;
       width: 107px;
       cursor: pointer;
            white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     }
     .tree_text{
       color: rgba(144, 147, 153, 1);
         display: inline-block;
       width: 107px;
       cursor: pointer;
            white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     }
   }
}
.right {
  width: 100%;
}
.img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-left: 20px;
  margin-right: 12px;
}
.nav_top_txt{
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
}
::v-deep .tree_nav{
  .el-button {
    padding: 0px;
    color:rgba(218, 218, 218, 1);
  }
}
</style>
